<template>
  <div class="container">
    <div class="searchContainer">
      <el-form :model="formData" label-width="80px" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="学校">
              <el-select v-model="formData.schoolId">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.schoolName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="dataContainer">
      <div class="optionContainer">
        <el-button type="primary" size="mini" @click="addNew($event, 'add')"
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        :height="400"
        size="small"
        header-row-class-name="headClass"
        highlight-current-row
        border
      >
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="schoolId" label="学校id"> </el-table-column>
      
        <el-table-column prop="className" label="班级名称"> </el-table-column>
        
        <el-table-column fixed="right" width="220" label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              size="mini"
              @click="checkDetail(scope.row)"
              >查看</el-button
            > -->
            <el-button
              type="warning"
              size="mini"
              @click="addNew(scope.row, 'edit')"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <div class="paginationContainer">
      <el-pagination background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div> -->

    <el-dialog
      :title="dialogType === 'add' ? '新增' : '编辑'"
      :visible.sync="showDialog"
      @close="handleClose"
    >
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="80px"
        label-position="left"
        size="mini"
      >
        <el-row>
          <el-col :span="24" v-if="dialogType === 'edit'">
            <el-form-item label="班级名称" prop="className">
              <el-input v-model="dialogForm.className"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="dialogType === 'add'">
            <el-form-item label="班级名称" prop="className">
              <el-input v-model="dialogForm.className"></el-input>
            </el-form-item>
          </el-col>
          
        </el-row>
      </el-form>
      <div class="btn-wrapper">
        <el-button type="primary" size="mini" @click="add">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchAllSchool, searchClassById, editClass, delClassById, addClass, checkClassDetail } from '@/api/api'
export default {
  data() {
    return {
      formData: {},
      dialogForm: {
        className: '',
      },
      total: 0,
      showDialog: false,
      dialogType: "",
      tableData: [],
      
      className: '',
      options: []
    };
  },
  created() {
      this.searchAllSchool()
  },
  methods: {
    search() {
      let params = {
        schoolId: this.formData.schoolId
      }
      searchClassById(params)
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.detailData
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    searchAllSchool() {
              searchAllSchool()
                .then(res => {
                    console.log(res)
                    if (res.code === 200) {
                      this.options = res.detailData
                    }
                })
                .catch(err => {
                    console.log(err)
                })
          },
    add() {
      if (this.dialogType === 'edit') {
        let params = {
          id: this.dialogForm.id,
          className: this.dialogForm.className
        }
        editClass(params)
          .then(res => {
            if (res.code === 200) {
              this.showDialog = false
              this.search(this.formData.schoolId)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        let params = {
          className: this.dialogForm.className,
          schoolId: this.formData.schoolId
        }
        addClass(params)
          .then(res => {
            console.log(res)
            this.showDialog = false
            this.search(this.formData.schoolId)
          })
          .catch(err => {
            console.log(err)
          })
      }
      

    },
    addNew(row, type) {
      this.showDialog = true;
      this.dialogType = type;
      if (type === "edit") {
        Object.assign(this.dialogForm, row);
        console.log(this.dialogForm)
      }
    },
    checkDetail(row) {
      console.log(row.id)
      let params = {
        id: row.id
      }
      checkClassDetail(params)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    del(row) {
      let { id } = row
      this.$confirm("是否删除该班级信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delClassById(id)
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delClassById(id) {
      let params = {
        id: id
      }
      delClassById(params)
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            this.showDialog  = false
            this.search()
          }
        }) 
        .catch(err => {
          console.log(err)
        })
    },
    handleClose() {
       for(let key in this.dialogForm) {
         this.dialogForm[key] = ''
      }
    }
  },
};
</script>

<style lang="less" scoped>
.searchContainer {
    background-color: #fff;
    margin: 10px 0;
    padding-top: 20px;
}
.dataContainer {
  background-color: #fff;
  padding: 20px;
  .optionContainer {
    margin-bottom: 10px;
    text-align: left;
  }
}
.btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.paginationContainer {
  margin-top: 20px;
  text-align: right;
}
</style>    